<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MSAC Register</title>

  <!-- 引入提交按钮开始 -->
  <script src="/components/button/submit/index.js"></script>
  <!-- 引入提交按钮结束 -->

  <!-- 引入地址选择器开始 -->
  <script src="/components/selector/address/index.js"></script>
  <!-- 引入地址选择器结束 -->

  <!-- 引入loading开始 -->
  <script src="/components/loading/bounce/index.js"></script>
  <!-- 引入loading结束 -->

  <!-- 引入shoelace开始 -->
  <link rel="stylesheet" href="/lib/node_modules/@shoelace-style/shoelace/dist/themes/light.css" />
  <script type="module" src="/lib/node_modules/@shoelace-style/shoelace/cdn/shoelace.js"></script>
  <!-- 引入shoelace结束 -->

  <link rel="stylesheet" href="/assets/css/tailwind.css" />
  <link rel="stylesheet" href="/pages/account/register/index.css" />
  <script src="/utils/locale.js"></script>
  <script src="/config/storage/local.js"></script>
  <script type="module" src="/utils/ajax.js"></script>

  <!-- 替换原生 WebSocket 为 STOMP over SockJS -->
  <script src="/lib/js/stomp.umd.min.js"></script>
  <script src="/lib/js/sockjs.min.js"></script>
  <script src="/utils/websocketclient.js"></script>
</head>

<template id="template-account-register">
  <wcs-loading-bounce></wcs-loading-bounce>
  <div class="div-icon">
    <p>
      <img src="/assets/images/icon.png" alt="MSAC" />{{i18n.PlatformText}}
    </p>
  </div>
  <div class="div-container">
    <svg class="svg-grid">
      <defs>
        <pattern id="grid-bg" width="32" height="32" patternUnits="userSpaceOnUse" x="100%"
          patternTransform="translate(0 -1)">
          <path d="M0 32V.5H32" fill="none" stroke="currentColor"></path>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid-bg)"></rect>
    </svg>
    <form class="box-center input-validation-required">
      <div class="div-register-title">{{i18n.RegisterText}}</div>
      <div class="div-register-box">
        <div class="div-register-div">
          <div class="div-register-text">{{i18n.UserNameText}}</div>
          <div class="div-register-input">
            <sl-input size="small" autocomplete="off" name="name" label="" required></sl-input>
          </div>
        </div>
        <div class="div-register-div div-phone">
          <div class="div-register-text">{{i18n.PhoneText}}</div>
          <div class="div-register-input phone-group">
            <sl-select class="phone-part" size="small" value="+86" name="phoneCode" required>
              <sl-option value="+86">+86</sl-option>
            </sl-select>
            <sl-input class="phone-part" size="small" name="phone" type="tel" required></sl-input>
          </div>
        </div>
        <div class="div-register-div">
          <div class="div-register-text">{{i18n.EmailText}}</div>
          <div class="div-register-input">
            <sl-input size="small" autocomplete="off" type="email" name="emailValue" label=""></sl-input>
          </div>
        </div>
        <div class="div-register-div">
          <div class="div-register-text">{{i18n.WechatText}}</div>
          <div class="div-register-input">
            <sl-input size="small" autocomplete="off" name="wechat" label=""></sl-input>
          </div>
        </div>
        <div class="div-register-div">
          <div class="div-register-text">{{i18n.DirectSupervisorText}}</div>
          <div class="div-register-input">
            <sl-select size="small" autocomplete="off" name="directSupervisorId" label=""></sl-select>
          </div>
        </div>
        <div class="div-register-div">
          <div class="div-register-text">{{i18n.OrganizationAtomicText}}</div>
          <div class="div-register-input">
            <sl-select size="small" autocomplete="off" name="organizationAtomicId" label=""></sl-select>
          </div>
        </div>
        <div class="div-register-div">
          <div class="div-register-text">{{i18n.GenderText}}</div>
          <div class="div-register-input">
            <sl-select class="phone-part" size="small" value="FEMAIL">
              <sl-option value="FEMAIL">女</sl-option>
              <sl-option value="MAIL">男</sl-option>
              <sl-option value="OTHER">其他</sl-option>
            </sl-select>
          </div>
        </div>
        <div class="div-register-div">
          <div class="div-register-text">{{i18n.BirthDateText}}</div>
          <div class="div-register-input">
            <sl-input size="small" type="date" autocomplete="off" name="birthDate" label=""></sl-input>
          </div>
        </div>
        <div class="div-register-div">
          <div class="div-register-text">{{i18n.IdCardText}}</div>
          <div class="div-register-input">
            <sl-input size="small" autocomplete="off" name="idCard" label=""></sl-input>
          </div>
        </div>
        <div class="div-register-div div-address">
          <div class="div-register-text">{{i18n.AddressText}}</div>
          <div class="div-register-input" id="address-content">
          </div>
        </div>
      </div>
      <div class="div-register-div">
        <div class="div-register-text"></div>
        <div class="div-register-input">
          <sl-button size="small" type="submit" variant="primary" style="float: right;">{{i18n.SubmitText}}</sl-button>
        </div>
      </div>
      <div class="div-register-footer"></div>
    </form>
  </div>
  <div class="div-footer">
    <footer>{{i18n.LoginFooter}}</footer>
  </div>
</template>

<body id="content-account-register">

</body>
<script type="module" src="/pages/account/register/index.js"></script>

</html>